<template>

  <el-card shadow="never" >

    <el-row>
      <el-col :span="8">
        <el-input placeholder="输入关键字进行过滤" size="mini" v-model="filterCommonUseText"></el-input>
      </el-col>
      <el-col :span="8">
        <el-button style="margin-left: 10px" @click="createFolder({'id':'-1', 'name': '根文件夹'})" type="primary" :size="layoutCss.size">创建文件夹</el-button>
      </el-col>
      <el-col :span="8">
        <el-button @click="uploadFile({'id':'-1', 'name': '根文件'})" type="primary" :size="layoutCss.size">上传文件</el-button>
      </el-col>
    </el-row>


    <!-- 节点树-->
    <!--
      indent 是防止树之间的间隔太大，这里要加样式才需要这个
      accordion 同一个节点，一次只能打开一个，防止树太大
    -->
    <div style="border: 1px solid #B9AEB2; margin-top: 10px; overflow-x: auto;">
      <el-tree style="min-height: 450px; max-height: 450px; width: max-content;"
               class="tree-line" :indent='0'
               :data="commonUseTree.dataTree"
               default-expand-all
               node-key="id"
               :accordion="false"
               @node-click="handleNodeClick"
               :filter-node-method="filterNode"
               :highlight-current="commonUseTree.highlightSelect"
               :check-on-click-node="commonUseTree.checkClick"
               :expand-on-click-node="commonUseTree.expandClickNode"
               ref="treeCommonUse"
      >
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <el-image class="folder-icon" v-if="data.folder === 1 && node.expanded" fit="contain" :src="require('@/assets/images/ico/folder-open.png')"/>
                <el-image class="folder-icon" v-else-if="data.folder === 1 && node.expanded === false" fit="contain" :src="require('@/assets/images/ico/folder-close.png')"/>
                <el-image class="folder-icon" v-else-if="data.folder === 0" fit="contain" :src="require('@/assets/images/ico/file.png')"/>

                <i class="el-icon-lock" style="color: red;" v-if="data.secrecy === 1"></i>
                <i class="el-icon-star-on" style="color: #E6A23C;" v-if="data.core === 1"></i>
                <span>{{ data.name }}</span>
                <span>
                  &nbsp;
                  <el-button v-show="data.folder === 1" type="text" size="mini" @click="() => createFolder({'id':data.id, 'name': data.name})">创建文件夹</el-button>
                  <el-button v-show="data.folder === 1" type="text" size="mini" @click="() => uploadFile({'id':data.id, 'name': data.name})">上传文件</el-button>
                  <el-button v-show="data.folder === 0" type="text" size="mini" @click="() => downFile(data)">下载</el-button>
                  <el-button type="text" size="mini" @click="() => openUpdSiteFileBefore(data)">修改</el-button>
                  <el-button v-show="data.children == null || data.children.length === 0" type="text" size="mini" @click="() => delBeforeTips(data)">删除</el-button>
                </span>
              </span>
      </el-tree>
    </div>


    <OpsCommonUseSaveUpd ref="OpsCommonUseSaveUpdRef" @getCommonUseTree="getCommonUseTree"/>


  </el-card>

</template>




<script>

import http from '@/utils/http'
import OpsCommonUseSaveUpd from './OpsCommonUseSaveUpd.vue'


export default {
  components: {
    OpsCommonUseSaveUpd,
  },
  // 注意，只有单向拿数据，不应该去修改父组件的数据
  props:{
    // 绑定id
    bindId:{
      type: String,
      required: true
    },
    // 绑定类型
    bindType:{
      type: String,
      required: true
    },
  },
  data() {
    return {
      // 搜索文件树
      filterCommonUseText: '',
      layoutCss :{
        size: 'mini',
      },
      // 常用文件
      commonUseTree: {
        dataTree: [],
        // 是否高亮选中
        highlightSelect: true,
        // 是否在点击节点的时候选中节点，默认值为 false，即只有在点击复选框时才会选中节点。
        checkClick: false,
        // 是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。
        expandClickNode: false,
      },
    }
  },
  methods: {
    /**
     * 创建文件夹功能
     * @param parent 当前层
     */
    createFolder(parent) {
      let obj = {
        parentId: parent.id,
        folder: 1,
        secrecy: 0,
        core: 0,
        type: this.bindType,
        bindId: this.bindId,
      }
      this.$refs.OpsCommonUseSaveUpdRef.init('save', obj, parent)
    },
    /**
     * 上传文件功能
     * @param parent 上级
     */
    uploadFile(parent) {
      let obj = {
        parentId: parent.id,
        folder: 0,
        secrecy: 0,
        core: 0,
        type: this.bindType,
        bindId: this.bindId,
      }
      this.$refs.OpsCommonUseSaveUpdRef.init('save', obj, parent)
    },
    /**
     * 节点被点击时的回调
     * @param data 当前被选中的节点
     */
    handleNodeClick(data){
      console.log("被点击了!", data)
    },
    /**
     * 过滤查询树
     * @param value 要过滤的值，查询的数据
     * @param data 当前节点数据
     * @param node 节点信息
     * @return {boolean}  返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏
     */
    filterNode(value, data, node) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    /**
     * 下载文件
     * @param obj 文件
     */
    downFile(obj){
      http.download('/fileStorage/downOutStreamById', { id: obj.fileId }, obj.name);
    },
    /**
     * 打开修改之前的的弹出框
     * @param obj 修改的值
     */
    openUpdSiteFileBefore(obj) {
      let parent = {'id':obj.parentId, 'name': obj.parentName}
      if (obj.parentId === '-1'){
        parent = {'id':obj.parentId, 'name': '根文件夹'}
      }
      this.$refs.OpsCommonUseSaveUpdRef.init('upd', obj, parent)
    },
    /**
     * 模糊查询文件树
     */
    getCommonUseTree(){
      http.post("/commonUse/getCommonUseTree", {
        bindId: this.bindId,
      }).then(response => {
        let res = response.data;
        this.commonUseTree.dataTree = res.data

      }).catch(error => {
        this.$message.error(error.message);
      })
    },
    /**
     * 删除之前的提示框
     * @param obj 要删除的数据
     */
    delBeforeTips(obj){
      this.$confirm('是否执行删除, 删除后无法恢复，是否继续?', '提示', {
        confirmButtonText: '确定删除',
        cancelButtonText: '取消删除',
        type: 'warning'
      }).then(() => {
        // 确定删除
        this.delCommonUse(obj)

      }).catch(() => {
        // 取消删除
      });
    },
    /**
     * 删除
     * @param obj 要删除的数据
     */
    delCommonUse(obj) {
      http.post("/commonUse/delCommonUse", {
        id: obj.id,
      }).then(response => {
        let res = response.data;
        this.getCommonUseTree()
        this.$message.success("删除成功");

      }).catch(error => {
        this.$message.error(error.message);
      })
    },

  },
  mounted() {
    this.getCommonUseTree()
  },
  watch: {
    /**
     * 监听值的变化
     * @param val 发生变化的数据
     */
    filterCommonUseText(val){
      this.$refs.treeCommonUse.filter(val);
    },
  },
}

</script>



<style>


/*
 文件管理器 start =========================
 */
/*
添加虚线 start
需要去掉 style 去掉scoped
需要在 el-tree 上添加 class="tree-line" :indent='0' 这2个属性
*/


/*缩进量*/
.tree-line .el-tree-node {
  position: relative;
  padding-left: 16px;
}

/*缩进量*/
.tree-line .el-tree-node__children {
  padding-left: 16px;
}

/*竖线*/
.tree-line .el-tree-node::before {
  content: '';
  height: 100%;
  width: 1px;
  position: absolute;
  left: -3px;
  top: -26px;
  border-width: 1px;
  border-left: 1px dashed #52627c;
}

/*当前层最后一个节点的竖线高度固定*/
.tree-line .el-tree-node:last-child::before {
  height: 38px;
}

/*横线*/
.tree-line .el-tree-node::after {
  content: '';
  width: 24px;
  height: 20px;
  position: absolute;
  left: -3px;
  top: 12px;
  border-width: 1px;
  border-top: 1px dashed #52627c;
}

/*去掉最顶层的虚线，放最下面样式才不会被上面的覆盖了*/
/*这里就是控制最外层是否显示的样式控制*/
.tree-line > .el-tree-node::after {
  border-top: none;
}
.tree-line > .el-tree-node::before {
  border-left: none;
}

/*展开关闭的icon*/
.tree-line .el-tree-node__expand-icon {
  font-size: 16px;
}
/*叶子节点（无子节点）*/
.tree-line .el-tree-node__expand-icon.is-leaf {
  color: transparent;
}

/* 隐藏 Element UI 的默认空状态提示 */
.tree-line .el-tree__empty-block {
  display: none !important;
}

/*
添加虚线 end
需要去掉 style 去掉scoped
*/


/*
 文件管理器 end =========================
 */

</style>



<style scoped>


/*
 文件树的图片 start =========================
 */

.folder-icon{
  width: 20px;
  height: 18px;
  vertical-align: middle;
  margin-right: 5px;
}

.custom-tree-node{

}
/*
 文件树的图片 end =========================
 */


</style>
